<template>
  <div class="app-container">
    
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">课程详情</span>
      </div>
      
      <el-form ref="form" :model="detailForm" :rules="rules" size="small" label-width="80px">
        <el-form-item label="课程封面" prop="coverImage">
          <img-inputer v-model="detailForm.coverImage" :imgSrc="file" theme="light" size="large" accept="image/*"/>
        </el-form-item>

        <el-form-item label="课程介绍" prop="intro">
          <div class="ql-editor">
            <quill-editor v-model="detailForm.intro"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
            </quill-editor>
            <div class="limit">当前已输入 <span>{{nowLength}}</span> 个字符，您还可以输入 <span>{{SurplusLength}}</span> 个字符。</div>
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button :loading="addLoading" type="primary" size="large" @click.native="addSubmit">提交</el-button>
          <el-button size="large" @click.native="dialog = false">取消</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getCourseDetail, addCourseDetail } from '@/api/course'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      file: '',
      detailForm: {
        id: -1,
        coverImage: '',
        intro: ``
      },
      uploadData: '',
      nowLength: 0,
      SurplusLength: 10000,
      addLoading: false,
      editorOption: {
        theme:'snow'
      },
      rules: {
        coverImage: [
          { required: true, message: '课程封面必填', trigger: 'blur' }
        ],
        intro: [
          { required: true, message: '课程详情必填', trigger: 'change' }
        ],
      }
    }
  },
  mounted() {
    this.detailForm.id = this.$route.params.courseId
    this.getCourseDetail()
  },
  methods: {

    getCourseDetail() {
      const params = { courseId: this.detailForm.id }
      getCourseDetail(params).then(res => {
        this.detailForm = res.data
        this.file = res.data && res.data.coverImage
      })
    },

    addSubmit: function() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.addLoading = true
          this.detailForm.id = this.$route.params.courseId
          
          let fd = new FormData()
          fd.append('courseId', this.$route.params.courseId)
          fd.append('file', this.detailForm.coverImage)
          fd.append('intro', this.detailForm.intro)

          addCourseDetail(fd).then((res) => {
            this.addLoading = false
            this.$message({
              message: '课程详情更新成功',
              type: 'success'
            })
          }).catch(err => {
            console.log('更新课程详情失败' + err.msg)
            this.$notify({
              title: err.msg,
              type: 'warning',
              duration: 5000
            })
            this.addLoading = false
          })
        }
      })
    },

    // chooseImg() {
    //   let file = this.file
    //   this.detailForm.coverImage = file
    // },

    onEditorBlur() {
      console.log('blur',this.messages)
    },

    onEditorFocus(){
      console.log('focus',this.messages)
    },

    onEditorReady(){
      console.log('ready',this.messages)
    }
  }
}
</script>

<style lang="less" scoped>
.ql-editor {
  padding: 0;
}

.limit {
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: right;

  span {
    color: #ee2a7b;
  }
}

.ql-snow .ql-editor img {
  max-width: 480px;
}

.ql-editor .ql-video {
  max-width: 480px;
}
</style>
<style lang="scss">
.quill-editor {
  .ql-container {
    min-height: 680px;
  }
}
</style>